<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="js/jquery-2.1.4.min.js"></script>
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="js/bootstrap.js"></script>
</head>
<body>
    <div class="container text-center" style="margin-top: 50px">
        <h2 style="margin: 20px">员工请假列表页面</h2>
        <form class="form-inline" style="margin: 20px;margin-left: 100px">
            <label for="username">员工姓名：</label>
            <input type="text" class="form-control m-2" id="username">
            <label for="department"> 所在部门：</label>
            <select class="form-control m-2" id="department">
                <option>产品一部</option>
                <option>产品二部</option>
                <option>产品三部</option>
                <option>产品四部</option>
            </select>
            <label for="state"> 审核状态：</label>
            <select class="form-control m-2" id="state">
                <option>未审核</option>
                <option>已通过</option>
                <option>已驳回</option>
            </select>
            <button type="submit" class="btn btn-primary">查询</button>
        </form>
        <table class="table table-striped table-bordered table-hover">
            <thead>
                <th>ID</th>
                <th>员工姓名</th>
                <th>所在部门</th>
                <th>请假原因</th>
                <th>请假起止日期</th>
                <th>审核状态</th>
                <th>操作</th>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>张强</td>
                    <td>研发一部</td>
                    <td>病假</td>
                    <td>2019-05-06至2019-05-07</td>
                    <td class="text-warning">已驳回</td>
                    <td>
                        <button type="button" class="btn btn-success disabled">通过</button>
                        <button type="button" class="btn btn-danger disabled">驳回</button>
                    </td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>王瑞鑫</td>
                    <td>人事部</td>
                    <td>事假</td>
                    <td>2019-05-21至2019-05-23</td>
                    <td class="text-success">已通过</td>
                    <td>
                        <button type="button" class="btn btn-success disabled">通过</button>
                        <button type="button" class="btn btn-danger disabled">驳回</button>
                    </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>田苗苗</td>
                    <td>产品二部</td>
                    <td>婚假</td>
                    <td>2019-05-23至2019-05-30</td>
                    <td class="text-muted">未审核</td>
                    <td>
                        <button type="button" class="btn btn-success">通过</button>
                        <button type="button" class="btn btn-danger">驳回</button>
                    </td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>张新凯</td>
                    <td>研发一部</td>
                    <td>病假</td>
                    <td>2019-05-22至2019-05-22</td>
                    <td class="text-muted">未审核</td>
                    <td>
                        <button type="button" class="btn btn-success">通过</button>
                        <button type="button" class="btn btn-danger">驳回</button>
                    </td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>孙思雨</td>
                    <td>产品三部</td>
                    <td>事假</td>
                    <td>2019-05-30至2019-01-01</td>
                    <td class="text-success">已通过</td>
                    <td>
                        <button type="button" class="btn btn-success disabled">通过</button>
                        <button type="button" class="btn btn-danger disabled">驳回</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <ul class="pagination" style="margin-left: 350px">
            <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">5</a></li>
            <li class="page-item"><a class="page-link" href="#">6</a></li>
            <li class="page-item"><a class="page-link" href="#">7</a></li>
            <li class="page-item"><a class="page-link" href="#">8</a></li>
            <li class="page-item"><a class="page-link" href="#">下一页</a></li>
        </ul>
    </div>
</body>
</html>